<template>
  <div class="ele-wrapper">
    <pad-child-header :title="title"></pad-child-header>
    <div class="ele-content">
      <div class="ele-pointer">
        <span @click="triggerHandleType(0)"></span>
        <span @click="triggerHandleType(1)"></span>
        <span @click="triggerHandleType(2)"></span>
        <span @click="triggerHandleType(3)"></span>
      </div>
      <div id="imgBox" ref="imgBox" class="ele-image">
        <div v-viewer ref="viewer">
          <img id="imgNode" ref="img" :src="img_code" alt>
        </div>
        <div v-if="drawFlag" id="imgMark" @touchstart="changeDraw($event)" @touchmove="moveClient($event)"></div>
      </div>
      <div class="ele-list">
        <div
          v-for="(item,index) in Powerfilmer"
          :key="index"  class="img-list"  :class="{ac: acImgList== index}"
          @click="chooseImg(item,index)"
        >
          <img :src="item.getSmallFilePath" alt @load="resizeimg($event)">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { HttpService } from "../../provides/index";
import { fx } from "../../bin/glfx.js";
import "viewerjs/dist/viewer.css";
// var PinchZoom = require("../../bin/pinch-zoom.umd.js");
export default {
  components: {},
  props: {},
  data() {
    return {
      acImgList:0, //默认选中第一张缩略图
      title: "电子胶片",
      params: "",
      img_code:'1',
      Powerfilmer: [],
      drawFlag: false,
      brighNum: 0,
      contrastNum: 0,
      imgElement: "",
      _canvas: "",
      _draw: "",
      pz: null,
      filmId: "",
      transformAcNum: 0,
      resX: 0,
      resY: 0,
      leftShowIndex:0,
    
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 获取图片地址
    getPowerfilmer(params) {
       this.$indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
      //
      HttpService.api({
        url: "/getPhoto",
        params: params,
        headers: {}
      }).then(res => {
         this.$indicator.close();
        if (res.success) {
          this.Powerfilmer = res.result || [];
          console.log(this.Powerfilmer);
          if (this.Powerfilmer.length) {
            this.chooseImg(this.Powerfilmer[0]);
          }
        }
      });
    },
    //操作
    triggerHandleType(index) {
      var box = document.getElementById("imgBox");
      this.imgElement = box.getElementsByTagName("img")[1];
      this.leftShowIndex = index;
      if (index == 0) {
        //移动
        this.drawFlag = false;
      } else if (index == 1) {
        //旋转
        this.$refs.viewer.$viewer.rotate(90);
      } else if (index == 2) {
        //左右亮度上下对比度
        if (!this.drawFlag) {
          this.drawFlag = true;
          this._canvas = fx.canvas();
          this._canvas.style.width = this.imgElement.offsetWidth;
          this._draw = this._canvas.texture(this.imgElement);
          this._canvas.draw(this._draw).update();
          this.imgElement.src = this._canvas.toDataURL();
        }
      } else if (index == 3) {
        //重置
        this.drawFlag = false;
        this.$refs.viewer.$viewer.reset();
        this.brighNum = 0;
        this.contrastNum = 0;
        this._canvas
          .draw(this._draw)
          .brightnessContrast(this.brighNum, this.contrastNum)
          .update();
        this.imgElement.src = this.img_code;
      }
    },

    /*方法说明
     *@method 方法名
     *@param event
     *@return  Void
     */
    resizeimg(event) {
      var el = event.currentTarget;
      var maxW = el.parentNode.offsetWidth;
      console.log(maxW);
      var maxH = el.parentNode.offsetHeight;
      var imgW = el.offsetWidth;
      var imgH = el.offsetHeight;
      if (imgW > imgH) {
        imgW = maxW;
        el.width = imgW;
      } else {
        imgH = maxH;
        el.height = imgH;
      }
    },
    /*方法说明
     *@method 方法名
     *@param data
     *@return  Void
     */
    chooseImg(data,index) {
      if(index != undefined){
        this.acImgList = index;
        }
      this.drawFlag = false;
      this.img_code ='data:image/png;base64,'+ data.getFilePath;
      // this.imgElement.src = data.tcSfPath;
    },
    /*方法说明
     *@method 方法名
     *@return  Void
     */
    drawSelect() {
      // this._canvas.brightnessContrast(0, 0).update();
    },
    changeDraw(ev) {
      if (this.drawFlag) {
        console.log(ev);
        this.resX = ev.touches[0].clientX;
        this.resY = ev.touches[0].clientY;
        console.log(this.resX);
        console.log(this.resY);
        // window.addEventListener('touchmove',_this.moveClient(resX,resY,ev),false)
        this.ontouchmove = function(ev) {};
      } else return;
    },

    moveClient(ev) {
      if (this.drawFlag) {
        var cX = ev.touches[0].clientX;
        var cY = ev.touches[0].clientY;
        console.log(cX);

        if (cX - this.resX < 0) {
          this.brighNum = this.brighNum - 0.05;
          if (this.brighNum <= -1) {
            this.brighNum = -1;
          }
          console.log(this.brighNum);
        } else if (cX - this.resX > 0) {
          this.brighNum = this.brighNum + 0.05;
          if (this.brighNum >= 1) {
            this.brighNum = 1;
          }
          console.log(this.brighNum);
        } else {
          this.brighNum = this.brighNum;
        }
        console.log(this.brighNum);

        if (cY - this.resY < 0) {
          this.contrastNum = this.contrastNum + 0.05;
          if (this.contrastNum >= 1) {
            this.contrastNum = 1;
          }
          console.log(this.contrastNum);
        } else if (cY - this.resY > 0) {
          this.contrastNum = this.contrastNum - 0.05;
          if (this.contrastNum <= -1) {
            this.contrastNum = -1;
          }
          console.log(this.contrastNum);
        } else {
          this.contrastNum = this.contrastNum;
        }

        this._canvas
          .draw(this._draw)
          .brightnessContrast(this.brighNum, this.contrastNum)
          .update();
        this.imgElement.src = this._canvas.toDataURL();
        console.log(this.img_code);

        this.resX = ev.touches[0].clientX;
        this.resY = ev.touches[0].clientY;
      } else return;
    }
  },
  created() {},
  mounted() {
    this.params = {
      patientid: this.$route.params.patientid,
      studyid: this.$route.params.studyid,
      hospcode: this.$route.params.hospcode,
      hospdomain: this.$route.params.hospdomain
    };

    this.getPowerfilmer(this.params);
  }
};
</script>
<style lang="scss" scoped>
.ele-content {
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  padding-top: pxToRem(65);
  display: flex;
  justify-content: space-around;
  .ele-pointer {
    width: pxToRem(150);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    span {
      display: block;
      height: pxToRem(66);
      width: pxToRem(66);
      &:nth-of-type(1) {
        background: url("../../assets/images/adaptation/1.png ") no-repeat
          center;
        background-size: 50% 50%;
      }
      &:nth-of-type(2) {
        background: url("../../assets/images/adaptation/2.png ") no-repeat
          center;
        background-size: 50% 50%;
      }
      &:nth-of-type(3) {
        background: url("../../assets/images/adaptation/3.png ") no-repeat
          center;
        background-size: 50% 50%;
      }
      &:nth-of-type(4) {
        background: url("../../assets/images/adaptation/4.png ") no-repeat
          center;
        background-size: 50% 50%;
      }
    }
  }
  .ele-image {
    width: pxToRem(710);
    height: pxToRem(692);
    box-shadow: pxToRem(3) pxToRem(4) pxToRem(5) 0px rgba(0, 0, 0, 0.29);
    border-radius: pxToRem(10);
    border: solid pxToRem(2) #469feb;
    overflow: hidden;
    // display: flex;
    // justify-content: center;
    // align-content: center;
    position: relative;
    canvas {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    img {
      width: 100%;
      height: 100%;
    }
    #imgNode {
      display: none;
    }
    #imgMark {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 999999;
    }
  }
  .ele-list {
    width: pxToRem(164);

    height: pxToRem(703);
    overflow-y: scroll;
    .img-list {
      width: pxToRem(110);
      height: pxToRem(110);

      border: #bababa solid pxToRem(1);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-top: pxToRem(10);
      &:nth-last-of-type() {
        margin-bottom: pxToRem(10);
      }
    }
    .ac{
      border: 2px solid #469feb;
    }
    img {
      height: 100%;
    }
  }
}
</style>